<template>
  <div class="resources-Page">
    <!--头部4个小盒子  -->
    <div class="head panel3">
      <div class="header">
        <!-- 1 -->

        <!-- 2 -->
        <div class="item num">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/01.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>计划接入客户数</div>
          </div>
        </div>
        <!-- 3 -->
        <div class="item quota">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/001.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>预计接入客户数</div>
          </div>
        </div>
        <!-- 4 -->
        <div class="item households">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/03.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>本月提供客户数</div>
          </div>
        </div>
        <!-- 5 -->
        <div class="item completion-rate">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/01.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>接入能源类型</div>
          </div>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
    <!-- z折线图饼图 -->
    <div class="main">
      <div class="line panel3">
        <h2>接入系统分析</h2>
        <div class="chart">
          <line-chart />
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="pie panel3">
        <h2>接入方式占比</h2>
        <div class="chart">
          <pie-chart />
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="table panel3">
      <h2>系统客户数据列表</h2>
      <div class="table-box">
        <line-chart />
        <!-- <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="60"> </el-table-column>
          <el-table-column prop="name" label="用户名称"> </el-table-column>
          <el-table-column prop="city" label="地区"> </el-table-column>
          <el-table-column prop="num0" label="所属行业"> </el-table-column>
          <el-table-column prop="num1" label="能源类型"> </el-table-column>
          <el-table-column prop="num2" label="水是否接入"> </el-table-column>
          <el-table-column prop="num3" label="电是否接入"> </el-table-column>
          <el-table-column prop="num4" label="气是否接入"> </el-table-column>
        </el-table> -->
      </div>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import PieChart from './components/PieChart.vue'
export default {
  name: 'ResourcesPage',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    LineChart,
    // eslint-disable-next-line vue/no-unused-components
    PieChart
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          city: '南京',
          name: '名称1',
          num0: '食品',
          num1: '水',
          num2: '是',
          num3: '是',
          num4: '是'
        },
        {
          date: '2016-05-04',
          name: '名称2',
          num0: '食品',
          city: '南京',
          num1: '水',
          num2: '是',
          num3: '是',
          num4: '是'
        },
        {
          date: '2016-05-01',
          name: '名称3',
          city: '南京',
          num0: '食品',
          num1: '水',
          num2: '是',
          num3: '是',
          num4: '是'
        },
        {
          date: '2016-05-03',
          name: '名称4',
          city: '南京',
          num0: '食品',
          num1: '水',
          num2: '是',
          num3: '是',
          num4: '是'
        }
      ]
    }
  },

  mounted() {},

  methods: {}
}
</script>
<style lang="scss" scoped>
@import './resourcesPage.scss';
//
</style>

